<template>
  <view>
    <up-list @scrolltolower="scrolltolower" height="100vh">
      <template v-if="list.length">
        <up-list-item v-for="(item, index) in list" :key="index">
          <view class="text-[29rpx] bg-white mb-2.5 py-4.5 px-5 box-border">
            <view class="flex mb-5.25">
              <text class="label text-[#8A8A8A] whitespace-nowrap"
                >报备日期：</text
              >
              <text class="text-black"
                >{{ dayjs(item.reportStartTime).format("YYYY-MM-DD hh:mm") }}
                至
                {{ dayjs(item.reportEndTime).format("YYYY-MM-DD hh:mm") }}</text
              >
            </view>
            <view class="flex mb-5.25">
              <text class="label color-[#8A8A8A] whitespace-nowrap"
                >报备内容：</text
              >
              <text class="text-black">{{ item.reportContent }}</text>
            </view>
            <view class="flex">
              <text class="label color-[#8A8A8A] whitespace-nowrap"
                >提交时间：</text
              >
              <text class="text-black">{{
                item.createTime
                  ? dayjs(item.createTime).format("YYYY-MM-DD hh:mm:ss")
                  : ""
              }}</text>
            </view>
          </view>
        </up-list-item>
      </template>
      <up-empty
        v-else
        mode="data"
        text="暂无记录"
        icon="http://cdn.uviewui.com/uview/empty/data.png"
      >
      </up-empty>
    </up-list>
    <up-toast ref="uToastRef"></up-toast>
  </view>
</template>
<script setup lang="ts">
import { listReport } from "@/api/police/clock";
import dayjs from "dayjs";
import { useUserInfoStore } from "@/stores/userInfo";
const userInfoStore = useUserInfoStore();

const uToastRef = <any>ref(null);
const data = reactive({
  queryParam: {
    pageNum: 1,
    pageSize: 10,
    month: undefined,
    policeUserId: undefined,
  },
  list: <any>[],
  total: 0,
});
const { queryParam, list, total } = toRefs(data);

onLoad((options) => {
  if (options && options.time && options.userId) {
    queryParam.value.month = options.time;
    queryParam.value.policeUserId = options.userId;
    getList();
  }
});

const scrolltolower = () => {
  getList();
};

// 获取报备列表
const getList = () => {
  uni.showLoading({
    title: "加载中",
    mask: true,
  });
  listReport(queryParam.value)
    .then((res) => {
      uni.hideLoading();
      const { data } = res;
      list.value = data.records;
      total.value = data.total;
    })
    .catch((err) => {
      uni.hideLoading();
      uToastRef.value.show({
        type: "error",
        message: err,
      });
    });
};
</script>
<style lang="scss" scoped></style>
